<template>
    <el-dialog title="修改密码" width="500px" :visible.sync="dialogVisible">
        <el-form ref="ruleForm" :model="form" :rules="formRules" label-width="80px">
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="form.pwd" type="password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="repwd">
                <el-input v-model="form.repwd" type="password" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { setPwd } from '@/api/system'
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                id: '',
                pwd: '',
                repwd: ''
            },
            formRules: {
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
                ],
                repwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        showDialog(id) {
            this.dialogVisible = true;
            this.resetForm();
            this.resetParams();
            this.form.id = id;
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                id: '',
                pwd: '',
                repwd: ''
            };
            
        },
        handleSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (this.form.pwd != this.form.repwd) {
                        this.$message.error('两次密码不一致')
                        return;
                    }
                    setPwd(this.form).then(res => {
                        if (res.status) {
                            this.$message({ type: 'success', message: '操作成功！'});
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            });
        }
    }
};
</script>